<template>
  <div>
    <el-main>
      <el-form
        ref="searchForm"
        size="small"
        :model="searchModel"
        :inline="true"
        @keyup.enter.native="search"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input
                placeholder="请输入名称"
                v-model="searchModel.name"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话">
              <el-input
                placeholder="请输入电话"
                v-model="searchModel.phone"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input
                placeholder="请输入邮箱"
                v-model="searchModel.email"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-refresh" size="small" @click="resetSearch"
            >重置
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
            >搜索
            </el-button
            >
            <el-link type="primary" :underline="false" @click="searchAll = true" style="margin-left: 10px" v-if="!searchAll">展开<i class="el-icon-bottom el-icon--right"></i></el-link>
            <el-link type="primary" :underline="false" @click="searchAll = false" style="margin-left: 10px" v-if="searchAll">收起<i class="el-icon-top el-icon--right"></i></el-link>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="searchAll">
          <el-col :span="6">
            <el-form-item label="openid">
              <el-input
                placeholder="请输入openid"
                v-model="searchModel.openId"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="searchModel.status" placeholder="请选择状态" clearable>
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchModel.createTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始创建时间"
                end-placeholder="结束创建时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        :data="tableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="openId"
          label="openid"
          width="240"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sortIndex"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="170">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-view" @click="handleView(row)">查看</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-link>
            <el-dropdown
              trigger="click"
              style="margin-left: 10px;"
            >
              <el-button type="text" icon="el-icon-more" />
              <el-dropdown-menu v-slot="dropdown">
                <el-dropdown-item>
                  <el-button size="small" type="text" icon="el-icon-view" @click="handleConsignee(row)">收货人管理</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="small" type="text" icon="el-icon-place" @click="handleAddress(row)">地址管理</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="small" type="text" icon="el-icon-view" @click="handleCoupon(row)">优惠卷管理</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="small" type="text" icon="el-icon-money" @click="handleRecharge(row)">充值管理</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="small" type="text" icon="el-icon-coin" @click="handleIntegral(row)">积分管理</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="tableData.total > 0"
          :total="tableData.total"
          :page.sync="tableData.current"
          :limit.sync="tableData.size"
          @pagination="search"
        />
      </div>
      <el-footer>
        <el-button type="primary"
                   icon="el-icon-unlock"
                   size="small"
                   @click="handleEnables"
        >启用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-lock"
                   size="small"
                   @click="handleDisables"
        >禁用
        </el-button
        >
      </el-footer>
      <MemberShow :show.sync="memberVisible" :member="member" />
    </el-main>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import MemberShow from "@/views/member/member/MemberShow.vue";
import {enablesMember,disablesMember,viewMember,pageMember} from "@/api/member/member";
import {Status} from "@/utils/constant/status";
import {parseTime} from "@/utils/common";
import {ApiError} from "@/utils/errors";

export default {
  components: {Pagination,MemberShow},
  data() {
    return {
      Status,
      memberVisible: false,
      member: null,
      searchAll: false,
      selection:[],
      searchModel:{
      },
      tableData: {
        records: [],
        total: 0,
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    handleSelectionChange(selection){
      this.selection = selection;
    },
    handleInsert() {
      this.$router.push({path: "member-insert"});
    },
    handleView(row) {
      const params = {id:row.id};
      viewMember(params).then(res => {
        if (res.status == 200) {
          if (res.data.errors) {
            return this.$message.error(ApiError.msg(res.data.errors));
          }
          this.member = res.data.data;
          this.memberVisible = true;
        }
      });
    },
    handleUpdate(row) {
      this.$router.push({path: "member-update",query:{id:row.id}});
    },
    handleConsignee(row){
      this.$router.push({path: "member-consignee",query:{id:row.id}});
    },
    handleAddress(row){
      this.$router.push({path: "member-address",query:{id:row.id}});
    },
    handleCoupon(row){
      this.$router.push({path: "member-coupon",query:{id:row.id}});
    },
    handleRecharge(row){
      this.$router.push({path: "member-recharge",query:{id:row.id}});
    },
    handleIntegral(row){
      this.$router.push({path: "member-integral",query:{id:row.id}});
    },
    handleEnables() {
      const params = {
        ids: this.selection
      };
      enablesMember(params).then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          this.$message.success(`成功启用${res.data.data.count}个会员`);
          this.search();
        }
      });
    },
    handleDisables() {
      const params = {
        ids: this.selection
      };
      disablesMember(params).then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          this.$message.success(`成功禁用${res.data.data.count}个会员`);
          this.search();
        }
      });
    },
    search() {
      const params = {
        name: this.searchModel.name,
        phone: this.searchModel.phone,
        email: this.searchModel.email,
        openId: this.searchModel.openId,
        status: this.searchModel.status,
        current: this.tableData.current,
        size: this.tableData.size
      };
      if(this.searchModel.createTime){
        params.createTimeStart = this.searchModel.createTime[0];
        params.createTimeEnd = this.searchModel.createTime[1];
      }
      pageMember(params).then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          const data = res.data.data;
          this.tableData.records = data.records;
          this.tableData.total = data.total;
          this.tableData.current = data.current;
          this.tableData.size = data.size;
        }
      });
    },
    resetSearch(){
      this.searchModel.name = null;
      this.searchModel.phone = null;
      this.searchModel.email = null;
      this.searchModel.openId = null;
      this.searchModel.status = null;
      this.searchModel.createTime = null;
    },
    statusFormatter(row) {
      return Status[row.status]["name"];
    },
    datetimeFormatter(row) {
      return parseTime(row["createTime"]);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/full-form";
@import "@/styles/common-table";
</style>
